<template>
  <div class="category">
    <!-- 顶部导航 -->
    <mt-header class="mytitle">
      <div slot="left">
        <mt-button icon="back"  @click="$router.go(-1)"></mt-button>
        <input type="text" v-model="searchData" placeholder="请输入要查询的商品名称" @keydown.enter="toSearchList('searchlist')">
      </div>
      <mt-button icon="search" slot="right" @click="jumpTo('search')"></mt-button>
    </mt-header>
    <!-- 分类导航 -->
    <div class="body">
      <!-- 分类导航 -->
      <nav class="nav-bar">
        <div class="mint-navbar" v-for="(item,index) in firstList" :key="index" @click="toggleCate(item.id)" :class="cateId===item.id ? 'active' : ''">
          <span>{{item.categoryName}}</span>
        </div>
      </nav>
      <!-- 分类二级导航 -->
      <div class="nav-item">
        <div v-if="secondList.length===0">
            <span>暂无数据</span>
        </div>
        <div v-else class="nav-content" v-for="(item,index) in secondList" :key="index">
          <div>
            <img :src='`http://localhost:3000${item.brandLogo}`' alt="">
            <span>{{item.brandName}}</span>
          </div>
        </div>
      </div>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>
<script>
import MyHeader from '@/components/my-header'
import TabBar from '@/components/tab-bar'
import {categoryList, categoryNav, quertGoods} from '@/api'
export default {
  components: {
    MyHeader,
    TabBar
  },
  data () {
    return {
      searchData: '',
      searchList: [],
      historyList: [],
      firstList: [],
      first: 1,
      secondList: [],
      cateId: 1,
      queryInfo: {
        proName: '',
        page: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.initRender()
  },
  methods: {
    // 封装一级目录请求
    initRender () {
      categoryList()
        .then(res => {
          this.thidId = res.rows.id
          this.firstList = res.rows
        })
      categoryNav(1)
        .then(res => {
          // console.log(res.rows)
          this.secondList = res.rows
        })
    },
    // 切换1级目录 => 渲染二级目录
    toggleCate (id) {
      this.cateId = id
      categoryNav(id)
        .then(res => {
          this.secondList = res.rows
        })
    },
    // 查询商品
    jumpTo (name) {
      this.$router.push({name: name})
    },
    toSearchList (name) {
      // 把local中的搜索历史数组取出来
      let foundList = JSON.parse(localStorage.getItem('historyList'))
      // 如果找不到fondList,就创建一个空的数组
      if (!foundList) {
        // 把当前搜索的关键词追加到local中
        this.historyList.unshift(this.searchData)
        console.log(this.historyList)
        // 把添加新关键词的数组存入local中
        localStorage.setItem('historyList', JSON.stringify(this.historyList))
      } else {
        this.historyList = JSON.parse(localStorage.getItem('historyList'))
        this.historyList.unshift(this.searchData)
        // 把添加新关键词的数组存入local中
        localStorage.setItem('historyList', JSON.stringify(this.historyList))
      }
      this.queryInfo.proName = this.searchData
      quertGoods(this.queryInfo)
        .then(res => {
          // 把上次搜索后保存的数组清空
          this.searchList = []
          // 把local中的数据清空
          this.searchList = JSON.stringify(res.data)
          localStorage.setItem('searchList', this.searchList)
          this.$router.push({name: name})
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.category{
  .mytitle{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 45px;
    background-color: #006699;
    color: #fff;
    font-size: 16px;
    ::before{
      font-weight: 600;
      font-size: 20px
    }
    input{
      width: 290px;
      height: 25px;
      border: none;
      outline: none;
      padding-left: 10px;
      font-size: 14px;
      margin-top: 5px;
    }
  }
  .body{
    padding: 45px 0  50px 0;
    display: flex;
    .nav-bar{
      display: flex;
      flex-direction: column;
      width: 30%;
      .mint-navbar{
        width: 100%;
        padding: 10px 0;
        flex: 1;
        background-color: rgb(235, 235, 235);
        color: #000;
        span{
          width: 100%;
          text-align: center
        }
      }
      .active{
        background-color: #006699;
        color: #fff
      }
    }
    .nav-item{
      width: 70%;
      display: flex;
      flex-wrap: wrap;
      .nav-content{
        width: 33.33%;
        text-align: center;
        img{
          width: 100%;
        }
        span{
          color: #666;
          font-size: 12px
        }
      }
    }
  }

}
</style>
